<template>
  <div class="app-container">
    <el-card class="box-card">
      <div style="margin-bottom: 15px;">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addItem">
          添加
        </el-button>
        <el-button type="primary" size="mini" @click="submitForm">保存设置</el-button>
        <el-button type="primary" size="mini" plain style="margin-right: 10px;" @click="confirm">确认释放</el-button>
        <el-switch v-model="releaseForm.is_open" :active-value="1" :inactive-value="0" active-color="#409eff" inactive-color="#f1f1f1" active-text="是否开启释放"></el-switch>

        <el-alert style="margin-top: 10px;"
          title="开启释放后每天晚上12点后释放"
          type="warning"
          show-icon>
        </el-alert>

        <div class="row_cnt" style="margin-top: 10px;display: flex;">
          <div style="margin-right: 20px;display: flex;align-items: center;">
            <div style="font-size: 14px;margin-right: 10px;width: 10em;text-align: right">分红金额</div>
            <el-input
              v-model="releaseForm.release_money"
              placeholder="请输入释放金额"
              size="mini"
              min="0"

              type="number"
              style="width: 200px;"
            />
          </div>
          <div style="display: flex;align-items: center;margin-right: 20px;">
            <div style="font-size: 14px;margin-right: 10px;width: 10em;text-align: right">预估分红金额</div>
            <el-input
              v-model="releaseForm.estimate_release_money"
              placeholder="请输入预估释放金额"
              :disabled="true"
              size="mini"
              type="number"
              style="width: 200px;"
              readonly
            />
          </div>

          <div style="display: flex;align-items: center;">
            <div style="font-size: 14px;margin-right: 10px;width: 10em;text-align: right">往期剩余分红金额</div>
            <el-input
              v-model="releaseForm.remaining"
              placeholder="请输入预估释放金额"
              :disabled="true"
              size="mini"
              type="number"
              style="width: 200px;"
              readonly
            />
          </div>

        </div>
        <div class="row_cnt" style="margin-top: 10px;display: flex;">
          <div style="margin-right: 20px;display: flex;align-items: center;">
            <div style="font-size: 14px;margin-right: 10px;width: 10em;text-align: right">商家分红金额</div>
            <el-input
              v-model="releaseForm.shop_release_money"
              placeholder="请输入释放金额"
              size="mini"
              type="number"
              min="0"
              style="width: 200px;"
            />
          </div>
          <div style="display: flex;align-items: center;margin-right: 20px;">
            <div style="font-size: 14px;margin-right: 10px;width: 10em;text-align: right">商家预估分红金额</div>
            <el-input
              v-model="releaseForm.shop_estimate_release_money"
              placeholder="请输入预估释放金额"
              :disabled="true"
              size="mini"
              type="number"
              style="width: 200px;"
              readonly
            />
          </div>

          <div style="display: flex;align-items: center;">
            <div style="font-size: 14px;margin-right: 10px;width: 10em;text-align: right">商家往期剩余分红金额</div>
            <el-input
              v-model="releaseForm.shop_remaining"
              placeholder="请输入预估释放金额"
              :disabled="true"
              size="mini"
              type="number"
              style="width: 200px;"
              readonly
            />
          </div>

        </div>

      </div>
      <el-table :data="releaseForm.releaseList" border  size="mini">
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column label="启动金额" width="200">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.start_money"
              size="mini"
              placeholder="请输入启动金额"
              type="number"
              min="0">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="结束金额" width="200">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.end_money"
              size="mini"
              placeholder="请输入结束金额"
              type="number"
              min="0">
            </el-input>
          </template>
        </el-table-column>

        <el-table-column label="释放比例(%)" width="200">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.release"
              size="mini"
              placeholder="请输入释放比例"
              type="number"
              min="0"
              max="100">
            </el-input>
          </template>
        </el-table-column>


        <el-table-column label="总金额" width="200">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.total_money"
              size="mini"
              disabled
              placeholder="请输入总金额"
              type="number"
              min="0">
            </el-input>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeItem(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>



    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ReleaseSetting',
  data() {
    return {
      releaseForm: {
        is_open:1,
        releaseList: [
          {
            start_money:0,
            end_money: 0,
            release: 0,
            total_money:0
          }
        ],
        estimate_release_money:0,
        release_money:0,
        remaining:0,
        shop_release_money:0,
        shop_estimate_release_money:0,
        shop_remaining:0
      }
    }
  },
  created() {
    this.getReleaseList(); //获取
  },
  methods: {
    addItem() {
      this.releaseForm.releaseList.push({
        start_money:'',
        end_money: '',
        release: '',
        total_money:'',

      })
    },

    confirm() {
      //弹个有输入框的弹框
      this.$prompt('请在下方输入框输入确认释放', '是否确定释放吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        inputPattern: /\S/,
        inputErrorMessage: '内容不能为空'
      }).then(({ value }) => {
        // 这里可以处理输入的值
        console.log('用户输入的值:', value);

        this.request('admin/startTask/', 'POST', {confirm:value}).then(res => {
          if(res.errno == 0) {
            this.$message.success(res.errmsg);
          }

        });

      }).catch(() => {
        // 用户取消操作
      })
    },

    removeItem(index) {
      if (this.releaseForm.releaseList.length <= 1) {
        this.$message.warning('至少保留一条记录')
        return
      }
      this.releaseForm.releaseList.splice(index, 1)
    },

    submitForm() {
      // 这里应该调用API保存数据
      for (const item of this.releaseForm.releaseList) {
        item.start_money = Number(item.start_money);
        item.end_money = Number(item.end_money);
        item.release = Number(item.release);
        item.total_money = Number(item.total_money);

        // 确保释放比例在0-100之间
        if (item.release < 0) item.release = 0;
        if (item.release > 100) item.release = 100;
      }
      this.releaseForm.estimate_release_money = Number(this.releaseForm.estimate_release_money);
      this.releaseForm.release_money = Number(this.releaseForm.release_money);
      this.releaseForm.remaining = Number(this.releaseForm.remaining);
      this.releaseForm.shop_release_money = Number(this.releaseForm.shop_release_money);
      this.releaseForm.shop_estimate_release_money = Number(this.releaseForm.shop_estimate_release_money);
      this.releaseForm.shop_remaining = Number(this.releaseForm.shop_remaining);

      this.request("admin/releaseGetList/", "post", this.releaseForm).then(
        (res) => {
          if(res.errno == 0) {
            this.$message.success('保存成功')
            this.getReleaseList()
          }
        },
        function () {
          console.log("请求失败处理");
        }
      );
    },

    getReleaseList() {

      this.request("admin/releaseGetList/", "get").then(
        (res) => {
          // 处理返回的数据，确保字段名一致
          if (res.data && res.data.releaseList) {
            res.data.releaseList.forEach(item => {
              if (item.total_moeny !== undefined) {
                item.total_money = item.total_moeny;
                delete item.total_moeny;
              }
            });
          }
          this.releaseForm = res.data
        },
        function () {
          console.log("请求失败处理");
        }
      );
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}
.row_cnt>div{
flex: 1;
}
</style>
